<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="app-logo flex-center">
			<view class="radius-10 app-logo_shadow position-relative">
				<u--image :showLoading="true" :src="configInfo.app_icon" width="150rpx" height="150rpx"></u--image>
				<view class="app-logo_slogan">
					<u-transition :show="true" mode="fade-up">
						<text class="badge app-logo_slogan-badge">{{$t('retrieve_pass.logo-slogan')}}</text>
					</u-transition>
				</view>
			</view>
		</view>
		<view class="form-warp m-md">
			<form @submit="retrieve">
				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="smartphone-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="number" name="mobile" :placeholder="$t('retrieve_pass.mobile-placeholder')" v-model="mobile" class="input"/>
						</view>
						<u-transition class="form-warp_item-btn flex-center p-l-sm p-r-sm" :show="true" v-if="mobile">
							<text class="text-xs text-danger" @click="smsBtnClick">{{!isGetSms ? $t('smscode.get') : $t('smscode.write')}}</text>
						</u-transition>
					</view>
				</view>
				<view class="form-warp_item p-md radius-25 m-t-md" v-if="isGetSms">
					<view class="flex-between flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="password" :placeholder="$t('retrieve_pass.password-placeholder')" class="input"/>
						</view>
					</view>
				</view>
				<view class="form-warp_item p-md radius-25 m-t-md" v-if="isGetSms">
					<view class="flex-between flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="password_confirm" :placeholder="$t('retrieve_pass.password-confirm-placeholder')" class="input"/>
						</view>
					</view>
				</view>
				
				<view class="form-warp_btns m-t-md">
					<u-button formType="submit" size="large" class="form-warp_btns-btn" shape="circle" :text="$t('retrieve_pass.submit-btn')" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor,'font-size':'25px'}" :loading="actionLoading" loadingText=" " :disabled="actionLoading || !isGetSms"></u-button>
					<i-icon class="form-warp_btns-icon" name="key-2-fill"></i-icon>
				</view>
			</form>
		</view>

		
		<m-modal
			:show="smsCodeShow"
			:title="$t('smscode.modal-title')"
			:btn="$t('smscode.modal-btn')"
			@close="closeSmsCodeModal"
			@btnComplete="smsCodeShow = false"
		>
			<view class="p-t-md p-b-md">
				<u-code-input v-model="smsCode" :maxlength="6"></u-code-input>
				<view class="text-center m-t-md" v-if="isGetSms">
					<u-count-down
						:time="smsCodeTime * 1000"
						format="ss"
						autoStart
						millisecond
						@change="smsCodeOnChange"
						@finish="smsCodeFinish"
						v-if="smsCodeStarDown"
					>
						<view class="flex-center text-sm text-warning">
							{{$util.handleStr($t('smscode.count-down'),smsCodeTimeData.seconds)}}
							<!-- {{ smsCodeTimeData.seconds }}s 后可重新获取 -->
						</view>
					</u-count-down>
					<m-icon class="text-sm text-danger" name="refresh-line" :text="$t('smscode.retrieve')" @click="getSmsCode" v-if="!smsCodeStarDown"></m-icon>
				</view>
			</view>
		</m-modal>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				mobile:'',
				actionLoading:false,
				isGetSms:false,
				smsCodeShow:false,
				smsCode:'', // 验证码
				smsCodeTime:60, // 倒计时多少秒
				smsCodeStarDown:false,// 验证码倒计时开始
				smsCodeTimeData: {}, //
				smsCodeSurplusTime:0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			parentUid: state => state.config.parentUid,
		}),
		
        async onLoad(option) {
			if(option.mobile){
				this.mobile = option.mobile;
			}
        },
		
		async onShow(){
			// 判断是否登录
			if(uni.getStorageSync('authToken')){
				// 如果已登录则返回上一页
				uni.showToast({
					title: this.$t('login.on-line-tips'),
					icon: "none"
				})
				this.goNavigateBack();
			}
			
			// 获取用户信息
			let arr = ['authToken', 'userInfo']
			arr.map(key => {
				this.updateUserState({
					key : key,
					val : uni.getStorageSync(key) || ''
				})
			})
		},
		methods: {
			...mapMutations(['updateUserState']),
			...mapActions(['getUserInfo']),
			
			// 重置密码
			async retrieve(e){
				if(!this.isGetSms)return
				this.actionLoading = true
				let data = e.mp.detail.value
				if(this.smsCode)data['smscode'] = this.smsCode
				let res = await this.$api.user.retrievePass(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.$util.redirectGo('auth/login')
					},'success')
				}
				this.actionLoading = false
			},
			
			// 获取验证码
			smsBtnClick(){
				if(!this.isGetSms){
					this.getSmsCode()
				}else{
					this.smsCodeShow = true
				}
			},
			
			// 获取验证码
			async getSmsCode(){
				this.$util.showLoading(this.$t('smscode.loading'))
				let data = {
					mobile:this.mobile,
					type:'login'
				}
				let res = await this.$api.user.getSms(data)
				if(res.code == 200){
					this.$util.showToast(this.$t('smscode.success'))
					this.isGetSms = true
					this.smsCode = ''
					this.smsCodeStarDown = true
					this.smsCodeTime = 60
					this.smsCodeShow = true
					this.$util.hideAll()
				}
			},
			
			// 验证码倒计时
            smsCodeOnChange(e) {
                this.smsCodeTimeData = e
				this.smsCodeSurplusTime = e.seconds
            },
			
			// 验证码倒计时结束
			smsCodeFinish(){
				this.smsCodeStarDown = false
			},
			
			// 关闭验证码输入框
			closeSmsCodeModal(){
				this.smsCodeShow = false
				this.smsCodeTime = this.smsCodeSurplusTime
			},
		}
	}
</script>

<style lang="scss">
	.app-logo{
		padding-top: 200rpx;
		margin-bottom: 100rpx;
		&_shadow{
			position: relative;
			box-shadow: 0px 5px 5px #00000020;
		}
		&_slogan{
			top: -10px;
			left: 100rpx;
			position: absolute;
		}
		&_slogan-badge{
			padding: 5rpx 15rpx;
			border-radius: 10px;
			color: var(--theme-danger-dark);
			background-color: var(--theme-danger-light);
			border: 1px solid var(--theme-danger-disabled);
			border-bottom-left-radius: 0;
		}
		/deep/ image{
			border-radius: 10px!important;
		}
	}
	
	.form-warp{
		margin: 50rpx!important;
		&_item{
			margin-top: 50rpx!important;
		}
		&_btns{
			position: relative;
			margin-top: 50rpx!important;
			overflow: hidden;
			border-radius: 25px;
		}
		&_btns-btn{
			letter-spacing: 2px;
		}
		&_btns-icon{
			position: absolute;
			font-size: 70px!important;
			top: -20px;
			right: -10px;
			color: var(--theme-line-four)!important;
			opacity: .3;
		}
	}
	
</style>
